<template>
    <div>
        <img src="../../assets/apple.png" alt="">
        <img src="https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505291512787.png" alt="">

        <img :src="imagePath" alt="">
        <!-- 错误用法 -->
        <!-- <img :src="localImage" alt=""> -->

        <!-- 用法一： -->
        <!-- <div v-for="item in fruitsData" :key="item.id">
            <span>{{ item.name }}</span>
            <img :src="item.image" alt="">
        </div> -->

        <!-- 用法二： -->
        <div v-for="item in fruitsData" :key="item.id">
            <span>{{ item.name }}</span>
            <img :src="getImage(item.image)" alt="">
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// 用法一：引入本地图片
// import apple from '../../assets/apple.png'
// import orange from '../../assets/orange.png'

// const fruitsData = ref([
//     { id: 1, name: '苹果', image: apple },
//     { id: 2, name: '橙子', image: orange },
// ]);

// 用法二：
const fruitsData = ref([
    { id: 1, name: '苹果', image: 'apple.png' },
    { id: 2, name: '橙子', image: 'orange.png' },
]);


const imagePath = ref('https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505291512787.png')

// 错误用法
// const localImage = ref('../../assets/apple.png');

function getImage(imageName) {
    return new URL(`../../assets/${imageName}`, import.meta.url).href;
}

</script>

<style scoped></style>